<template>
	<view class="comment-wrapper">
		<view class="wrap">

			<view class="comment-header">
				<view class="title">大家认为</view>
				<view class="categories">
					<block v-for="(item, index) in categories" :key="index" v-if="index < 6">
						<view :class="['item', {'active': categoryIndex == index}]" @click="switchCategory(index)">{{item.name}}（{{item.count}}）</view>
					</block>
				</view>
			</view>
			<view class="comment-main">
				<view class="comment-top">
					<view class="title">热门评价</view>
					<view class="btn-check">
						<label @click="switchOnlyPhotos">
							<checkbox disabled :checked="onlyPhotos" color="#FF6700"></checkbox>
							<text>只显示带图评价</text>
						</label>
					</view>
				</view>
				<view class="comment-mid">
					<view class="min-left">
						<view class="comment" v-for="(item, index) in comments" :key="index">
							<view class="top">
								<img class="avatar" :src="item.avatarUrl" />
								<view class="publish-info">
									<view class="user-name elip">{{item.userName}}</view>
									<view class="publish-date">{{item.date | filterDate}}</view>
								</view>
								<rate class="love" :score="item.score"></rate>
							</view>
							<view class="content">{{item.comment}}</view>
							<view class="photos" v-if="item.photoUrls.length > 0">
								<block v-for="(photo, photoIndex) in item.photoUrls" :key="photoIndex">
									<image class="photo" :src="photo" mode="aspectFill" @click="previewPhoto(photo)"></image>
								</block>
							</view>
							<view :class="['like', {'active': item.liked}]">
								<view class="like-wrap" @click="switchLike(item)">
									<i class="icon i-like"></i>
									<text class="count">{{item.likes}}</text>
								</view>
							</view>
						</view>
						<view class="btn-more">加载更多</view>
					</view>
					<view class="min-right">
						<view class="score-result">
							<view class="title">
								<text class="value">10115</text>
								<text>人购买后满意</text>
							</view>
							<view class="degree">
								<view class="value">满意度：97.7%</view>
							</view>
						</view>
						<view class="btn-gotop" v-if="comments.length > 1" @click="goTop"></view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import rate from '@/components/goods/rate.vue';
	import commentConfig from '@/common/config/goods/comment.config.js';

	export default {
		components: {
			rate
		},
		props: {
			goodsId: Number
		},
		data() {
			return {
				...commentConfig,
				categoryIndex: 0,
				onlyPhotos: false
			}
		},
		filters: {
			filterDate(date) {
				return date.split(' ')[0];
			}
		},
		methods: {
			switchCategory(index) {
				this.categoryIndex = index;
			},
			switchOnlyPhotos() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				setTimeout(() => {
					uni.hideLoading();
					this.onlyPhotos = !this.onlyPhotos;
				}, 1000);
			},
			previewPhoto(url) {
				uni.previewImage({
					urls: [url]
				});
			},
			switchLike(item) {
				item.liked = item.liked ? false : true;
				if (item.liked) {
					item.likes++;
				} else {
					item.likes--;
				}
			},
			goTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100
				});
			}
		}
	}
</script>

<style lang="scss">
	.comment-wrapper {
		background-color: $bg-color-grey;
		display: flex;
		flex-direction: column;

		.wrap {
			width: 1226px;
			margin: 0 auto;

			.comment-header {
				margin: 32px 0 30px;
				padding: 40px;
				background-color: $bg-color;

				.title {
					font-size: 18px;
					color: #757575;
					line-height: 28px;
				}

				.categories {
					margin-top: 14px;
					@extend %flex-align-center;
					justify-content: space-between;

					.item {
						min-width: 168px;
						height: 44px;
						line-height: 44px;
						text-align: center;
						color: #b0b0b0;
						font-size: 14px;
						border: 1px solid #eee;
						background: #f5f5f5;
						transition: all .2s;
						cursor: pointer;
						transition: all .2s;

						&:hover {
							opacity: .8;
						}

						&.active {
							border-color: $color-primary;
							background-color: $color-primary;
							color: #fff;
							cursor: default;
						}
					}
				}
			}

			.comment-main {
				padding-bottom: 30px;

				.comment-top {
					width: 792px;
					height: 50px;
					line-height: 40px;
					font-size: 22px;
					color: #616161;
					@extend %flex-align-center;
					justify-content: space-between;

					.title {
						line-height: 40px;
						font-size: 22px;
						color: #616161;
					}

					.btn-check {
						font-size: 14px;
						color: #b0b0b0;
						line-height: 40px;
						cursor: pointer;

						checkbox {
							transform: scale(.7);
						}
					}
				}

				.comment-mid {
					display: flex;


					.min-left {
						width: 792px;

						.comment {
							padding: 40px 40px 46px 103px;
							background-color: $bg-color;
							margin-bottom: 15px;

							.top {
								@extend %flex-align-center;

								.avatar {
									width: 47px;
									height: 47px;
									margin-left: -55px;
								}

								.publish-info {
									margin-left: 10px;

									.user-name {
										max-width: 220px;
										height: 18px;
										line-height: 18px;
										font-size: 16px;
										color: #8d665a;
									}

									.publish-date {
										height: 20px;
										line-height: 20px;
										margin-top: 6px;
										font-size: 14px;
										color: #b0b0b0;
									}
								}

								.love {
									margin-left: auto;
								}
							}

							.content {
								margin-top: 8px;
								color: #5e5e5e;
								font-size: 18px;
								line-height: 27px;
							}

							.photos {
								margin-top: 15px;
								display: flex;
								flex-wrap: wrap;

								.photo {
									width: 160px;
									height: 160px;
									margin: 0 8px 8px 0;
									cursor: pointer;
								}
							}

							.like {
								margin-top: 8px;
								line-height: 33px;
								display: flex;

								&.active {
									.like-wrap .icon {
										color: $color-primary;
									}
								}

								.like-wrap {
									cursor: pointer;

									.icon {
										font-size: 22px;
										line-height: 33px;
										color: #757575;
									}

									.count {
										line-height: 33px;
										font-size: 14px;
										color: #757575;
										margin-left: 2px;
									}
								}
							}
						}

						.btn-more {
							color: $color-primary;
							width: 100%;
							height: 45px;
							margin-top: 15px;
							line-height: 45px;
							font-size: 14px;
							background-color: $bg-color;
							text-align: center;
							cursor: pointer;
						}
					}

					.min-right {
						margin-left: auto;
						width: 420px;
						position: relative;

						.score-result {
							margin-bottom: 30px;
							padding: 22px 30px 40px;
							background-color: $bg-color;

							.title {
								font-size: 14px;
								color: #b0b0b0;

								.value {
									font-size: 60px;
									color: #ff6700;
								}
							}

							.degree {
								height: 22px;
								margin-top: 10px;
								background: #f1f2f6;
								position: relative;

								.value {
									width: 97.7%;
									height: 22px;
									line-height: 22px;
									background: #83c44e;
									text-align: center;
									font-size: 12px;
									color: #fff;
									position: absolute;
									top: 0;
									left: 0;
								}
							}
						}

						.btn-gotop {
							position: absolute;
							bottom: 0;
							left: 0;
							margin-top: 15px;
							width: 110px;
							height: 110px;
							background: #fff url(//c1.mifile.cn/f/i/17/comment2017/arrow.png) 50% no-repeat;
							cursor: pointer;
						}
					}
				}
			}
		}
	}
</style>
